import { Alert, Tabs } from '@aws-amplify/ui-react';
import { FlutterAuthenticatorExample } from '@/components/FlutterAuthenticatorExample';
import { Fragment } from '@/components/Fragment';

<Alert role="none" heading="Zero Configuration">

The Authenticator [automatically infers](/connected-components/authenticator#step-1-configure-backend) `loginMechanisms` from `amplify pull`.
Below are examples of username, email, and phone number based login.

</Alert>

> **Note**: A `username`, `email`, or `phone_number` value is required for Cognito User Pools.

<Tabs.Container defaultValue="Username">
  <Tabs.List>
    <Tabs.Item value="Username">Username</Tabs.Item>
    <Tabs.Item value="Email">Email</Tabs.Item>
    <Tabs.Item value="Phone Number">Phone Number</Tabs.Item>
  </Tabs.List>
  <Tabs.Panel value="Username">
    <FlutterAuthenticatorExample
      id="flutter-authenticator-login-username"
      usernameAttribute={'USERNAME'}
    />
  </Tabs.Panel>
  <Tabs.Panel value="Email">
    <FlutterAuthenticatorExample
      id="flutter-authenticator-login-email"
      usernameAttribute={'EMAIL'}
    />
  </Tabs.Panel>
  <Tabs.Panel value="Phone Number">
    <FlutterAuthenticatorExample
      id="flutter-authenticator-login-phone-number"
      usernameAttribute={'PHONE_NUMBER'}
    />
  </Tabs.Panel>
</Tabs.Container>
